<template>
    <el-tabs :class="config.attributes?.cssClass" v-show="!config.attributes.hidden" v-model="activeName" :tab-position="config.attributes.tabPosition"
        :type="config.attributes.tabType" class="tab-container">
        <el-tab-pane v-for="(tab, index) in config.children" :key="tab.id"
            :label="tab.attributes.label || 'Tab' + (index + 1)" :name="tab.id">
            <div class="tab-runtime">
                <component v-for="child in tab.children" :key="child.id" :is="designer.renderComponent(child)"
                    :config="child" />
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, inject, onMounted, watch } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'

const designer = inject('designer')

const props = defineProps({
    config: {
        type: Object,
        required: true
    }
})

const activeName = ref('')

onMounted(() => {
    if (props.config.children.length > 0) {
        activeName.value = props.config.children[0].id
    }
})

watch(
    () => props.config.children.length,
    (len) => {
        if (len > 0) {
            activeName.value = props.config.children[0].id
        }
    }
)
</script>

<style scoped>
.tab-container {
    margin: 10px 0;
}

.tab-runtime {
    display: flex;
    flex-direction: column;
    margin: 10px;
    gap: 10px;
}

::v-deep(.el-tabs__content) {
  padding: 0 !important;
  margin: 0 !important;
}
::v-deep(.el-tabs__header){
    padding: 0 !important;
    margin: 1px !important;
}
</style>